<template>
    <view class="navigation-content">
        <u-popup v-model="popShow" safe-area-inset-bottom>
            <view class="status_bar" />
            <view class="navigation-area">
                <al-menu :menuList="menuList" :listMap="listMap" v-bind="{ ...menuConfig }" />
            </view>
        </u-popup>
    </view>
</template>
<script>
    import { defineComponent, ref, computed } from 'vue'
    import AlMenu from './menu'
    import navigationConfig from './config'

    export default defineComponent({
        name: 'AlNavigation',
        components: { AlMenu },
        props: {},
        setup(props, { expose }) {
            const popShow = ref(false)
            const setNavPopup = () => {
                popShow.value = !popShow.value
            }
            expose({
                setNavPopup
            })
            const { list, ...otherConfig } = navigationConfig
            const recursiveList = (menuList, listMap) => {
                menuList.forEach(item => {
                    if (item.menuUrl && item.contentSetting && item.menuId) {
                        const url = item.contentSetting.settingType === 'FAKE_ALLIN_RESOURCE_MENU'
                        ? `pages/process/Workbench`
                        : item.contentSetting.settingId
                        ? `pages/Page${item.contentSetting.settingId}/Page${item.contentSetting.settingId}`
                        : '';
                        listMap[url] = item.menuId
                    }
                    if (item.children && item.children.length > 0) {
                        recursiveList(item.children, listMap)
                    }
                })
            }

            // 过滤无权限菜单页面
            const filterNoPeremissionMenu = (list) => {
                const permissionCodeMap = JSON.parse(uni.getStorageSync('permissionCodeMap') || '[]');
                return list.filter((item) => {
                    if (item.children && item.children.length > 0) {
                        filterNoPeremissionMenu(item.children)
                    }
                    if(item.code) {
                        return permissionCodeMap?.includes(item.code)
                    }
                    return false
                })
            }

            const listMap = ref({})
            // 获取页面地址对应的菜单id集合
            const getListMap = () => {
                const _tempListMap = {}
                recursiveList(list, _tempListMap)
                listMap.value = _tempListMap
            }
            getListMap()
            const menuList = computed(() => {
                return filterNoPeremissionMenu(list)
            })
            const menuConfig = ref(otherConfig)
            return {
                popShow,
                setNavPopup,
                menuConfig,
                menuList,
                listMap
            }
        }
    })
</script>
<style lang="less" scoped>
    .navigation-content {
        position: fixed;
        left: 0;
        top: 48px;
        z-index: 960;
        .status_bar {
            height: calc(44px + var(--status-bar-height) * 2);
            width: 100%;
        }
        .navigation-area {
            width: 70vw;
        }
    }
</style>
